import React, { useState, useEffect } from "react";
import "./style.scss";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import { Toast, Tabs } from "antd-mobile";
import MainLayout from "@component/mainLayout/mainLayout";
import CouponItem from "@views/viewCommon/CouponItem";
function UseRecord(props) {
	const [initialPage, set_initialPage] = useState(0);
	const [couponCenterList, set_couponCenterList] = useState();

	/*******************业务方法 start************************/

	/**
	 * @msg: 已使用（已过期优惠券）优惠券
	 * @param {*} load 取消loading
	 * @return {*}
	 */
	function couponCenter_queryUsedCouponList(status, load) {
		return new Promise((resolve, reject) => {
			const params = {
				url: InterfaceG.couponCenter_queryUsedCouponList,
				//状态：1，已使用；2，已过期
				params: { status }
			};
			yhTools.request(params).then(res => {
				if (load) {
					Toast.hide();
				}
				resolve();
				if (res.code === "0") {
					set_couponCenterList(res.data);
				} else {
					Toast.info(res.message, 2);
				}
			});
		});
	}

	/**
	 * @msg:初始化页面数据
	 * @param {*}
	 * @return {*}
	 */
	function initData() {
		Toast.loading("加载中", 100);
		let p_couponCenter_queryUsedCouponList = couponCenter_queryUsedCouponList(
			"1"
		);
		Promise.all([p_couponCenter_queryUsedCouponList]).finally(() => {
			Toast.hide();
		});
	}

	/**
	 * @msg: 标签变化
	 * @param {*} index
	 * @return {*}
	 */
	const tabsChange = index => {
		Toast.loading("加载中", 100);
		set_initialPage(index);
		if (index === 0) {
			couponCenter_queryUsedCouponList("1", true);
		} else {
			couponCenter_queryUsedCouponList("2", true);
		}
	};

	/*******************业务方法 end************************/

	useEffect(() => {
		initData();
	}, []);

	/*******************点击事件 start************************/

	/*******************点击事件 end************************/
	let _pageParams = {
		header: {
			title: "使用记录",
			headerBackground: "#fff",
			titleColor: "#232323",
			newBackButt: true
		},
		history: props.history,
		cacheLifecycles: props.cacheLifecycles
	};
	const tabs = [{ title: "已使用" }, { title: "已过期" }];
	return (
		<MainLayout pageParams={_pageParams}>
			<div className="page-useRecord">
				{/*券列表 */}
				<Tabs
					className="useRecord-tabs"
					tabs={tabs}
					tabBarUnderlineStyle={{
						width: ".32rem",
						left: initialPage === 0 ? "1.7rem" : "5.45rem"
					}}
					initialPage={0}
					onChange={(tab, index) => {
						tabsChange(index);
					}}
				>
					<div className="useRecord-list">
						{couponCenterList &&
							couponCenterList.length > 0 &&
							couponCenterList.map((v, i, a) => {
								return (
									<CouponItem
										styleType={
											v.couponTypeNo === "01" || v.couponTypeNo === "02"
												? "1"
												: "2"
										}
										couponStatus={"3"}
										key={`${v.couponName}${i}`}
										item={v}
										index={i}
										couponArray={a}
									/>
								);
							})}
					</div>
					<div className="useRecord-list">
						{couponCenterList &&
							couponCenterList.length > 0 &&
							couponCenterList.map((v, i, a) => {
								return (
									<CouponItem
										styleType={
											v.couponTypeNo === "01" || v.couponTypeNo === "02"
												? "1"
												: "2"
										}
										couponStatus={"4"}
										key={`${v.couponName}${i}`}
										item={v}
										index={i}
										couponArray={a}
									/>
								);
							})}
					</div>
				</Tabs>
				{couponCenterList && couponCenterList.length > 0 && (
					<div className="useRecord-more f-24 c-999">
						- 已经看完了，没有更多了-
					</div>
				)}
				{couponCenterList && couponCenterList.length === 0 && (
					<div className="list-noData ui-flex ui-flex-column ui-flex-align-center">
						<div className="noData-pic ui-flex ui-flex-justify-center ">
							<div className="noData-icon"></div>
						</div>
						<div className="noData-tips f-28 c-666">暂无记录</div>
					</div>
				)}
			</div>
		</MainLayout>
	);
}

export default UseRecord;
